<template>
	<view >
		<view class="head" :class="{white:white,Gradient:Gradient,Black:Black,Orange:Orange}">
			<view class="bnkm" :style="{'margin-top':zhuangtai+'px',}">
				<view class="back" @click="back" v-if="!tik"></view>
				<view class="back" @click="backd" v-if="tik"></view>
				<view class="head_cen" v-if="!box">
					{{title}}
				</view>
				
				<view class="boxd" v-if="box">
					<view class="btn" :class="{check:types==0}" @click="change(0)">全部</view>
					<view class="btn" :class="{check:types==1}" @click="change(1)">摄影</view>
					<view class="btn" :class="{check:types==2}" @click="change(2)">造型</view>
					<view class="tiao" :style="{'left':(numb-1)*33+11+'%',}"></view>
				</view>
			</view>
			
			
		</view>
		<view style="height:98rpx;" :style="{'padding-bottom':zhuangtai+'px',}"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	
	export default {
		data() {
			return {
				zhuangtai:'',
				numb:0,
			}
		},
		props:['title','box','white','Gradient','tik','types','Black','Orange'],
		computed: {
			
		},
		onLoad() {

		
		},
		created() {
			let that = this
			let system = uni.getSystemInfoSync();
			that.zhuangtai = system.statusBarHeight;
			that.numb=that.types+1;
			
			
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			backd(){
				this.$emit('close')
			},
			change(e){
				this.numb=e+1;
				this.$emit('change',e)
			}
		}
	}
</script>

<style scoped lang="scss">
.head{
		position: fixed;
		width:100%;
		top:0;
		left:0;
		z-index: 99;
		border-top:1upx solid transparent;
		.bnkm{
			height:98upx;
			width:100%;
			margin:0 auto;
			position: relative;
			
		}
		&.white{
			background: #fff;
			.head_cen{
				color:#000000;
			}
			.back{
				background: url(../../static/tab_jian.png)no-repeat center;
				background-size:100%;
			}
		}
		&.Gradient{
			background: linear-gradient(to bottom,#4D3920,#111);
		}
		&.Black{
			background: #161616;
		}
		&.Orange {
			background: #EBBE87 ;
		}
		.back{
			position: absolute;
			background: url(../../static/left_jian.png)no-repeat center;
			background-size:100%;
			width:36rpx;
			height:36rpx;
			left:36rpx;
			top:31rpx;
		}
		.head_cen{
			width:400rpx;
			margin:0 auto;
			line-height: 98rpx;
			text-align: center;
			white-space: nowrap;
			color:#fff;
			font-size:32rpx;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
.boxd{
	width:330upx;
	margin:0 auto;
	position: relative;
	height:98upx;
	display: flex;
	.btn{
		width:110upx;
		text-align: center;
		color:#999999;
		line-height: 98upx;
		font-size:32upx;
		&.check{
			color:#F9E8BE;
		}
	}
	.tiao{
		position: absolute;
		width: 40upx;
		height: 4upx;
		background: #F9E8BE;
		bottom:20upx;
		left:35upx;
		transition: all 0.3s;
	}
}
</style>
